<template>
  <div class="GWC">
    <div class="top" v-if="!isusers">
      <van-icon name="arrow-left" @click="fanhui" />
      <p class="topgwc">购物车</p>
      <input type="button" :value="zhuangtai" class="bianji" @click="del" />
    </div>

    <!-- --------- 登录前------------ -->
    <div>
      <div class="weidenglu" v-if="!isuser">
        <ul>
          <li>30天无忧退货</li>
          <li>48小时快速退款</li>
          <li>满99元免邮费</li>
        </ul>
        <img
          src="https://trade.m.xiaomiyoupin.com/youpin/static/m/res/images/no_result/no_result_cart2.png"
        />
        <p>登录后才能看到商品哟~</p>
        <h3 @click="login">立即登录</h3>
        <Navigation />
      </div>
    </div>
    <!------------------- 底部 --------------------->
    <!-- 全删的部分话 -->
    <div v-if="isusers">
      <div class="top">
        <van-icon name="arrow-left" @click="fanhui" />
        <p class="topgwc">购物车</p>
      </div>
      <div class="weidenglu">
        <ul>
          <li>30天无忧退货</li>
          <li>48小时快速退款</li>
          <li>满99元免邮费</li>
        </ul>
        <img
          src="https://trade.m.xiaomiyoupin.com/youpin/static/m/res/images/no_result/no_result_cart2.png"
        />
        <p>没有商品哟~</p>
        <p>快去添加商品吧</p>

        <Navigation />
      </div>
    </div>

    <!--  v-if="isuser"-->
    <!---------------------------- 登录后--------------------------------- -->
    <div class="dengluhou" v-if="isuser">
      <ul class="goods_">
        <li class="goods_1" v-for="(good, index) in goods" :key="good.goodsId">
          <!-- 多选框 -->
          <input
            type="checkbox"
            class="check"
            v-model="good.isChecked"
            @change="backCheck"
          />

          <img :src="good.goodsimg" class="imggoods_" />
          <div class="goods_neirong">
            <p class="goodname_">
              {{ good.goodsname }}
            </p>
            <p class="goodcolor">颜色:无</p>
            <div class="price_">
              <span class="goods_price">￥{{ good.goodsprice }}</span>
              <p>
                <input
                  type="button"
                  value="-"
                  class="jian"
                  @click="jian(index)"
                />
                <span class="numb">{{ good.count }}</span>
                <input
                  type="button"
                  value="+"
                  class="add"
                  @click="jia(index)"
                />
              </p>
            </div>
          </div>
        </li>
      </ul>
      <Navigation />
      <div v-if="!isusers">
        <van-submit-bar
          :price="totalMoney1"
          button-text="下单"
          @submit="jiesuan"
          button-color="#f60"
          class="goumai"
        >
          <van-checkbox v-model="allchecked" @click="checkAll"
            >全选</van-checkbox
          >
        </van-submit-bar>
        <van-submit-bar
          :price="totalMoney1"
          button-text="删除"
          @submit="onSubmit"
          button-color="#f60"
          class="shanchu"
        >
          <van-checkbox v-model="allchecked" @click="checkAll"
            >全选</van-checkbox
          >
        </van-submit-bar>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import Navigation from "./components/gwc/navigation.vue";

export default {
  name: "gwc",
  data() {
    return {
      checks: {},
      index1: -1,
      allchecked: false,
      isuser: false,
      isusers: false,
      totalMoney1: 0,
      zhuangtai: "编辑",
      goods: [],
      count: "",
      xuan: {},
    };
  },
  components: {
    Navigation,
  },

  created() {
    // 判断是否登录
    axios.get("/gwc").then((res) => {
      res.data.forEach((item) => {
        item.isChecked = false;
      });
      this.goods = res.data;
      if (this.goods.length == "") {
        this.isusers = true;
      }
    });
    // 判断是否登录
    if (window.localStorage.getItem("user")) {
      this.isuser = true;
    }
  },

  methods: {
    login() {
      this.$router.push("/login");
    },
    fanhui() {
      this.$router.back();
    },
    // 下单
    jiesuan() {
      console.log(this.$root);
      this.$store.state.gwc.goodsid = this.checks;
      this.$store.state.gwc.adid = 1;
      this.$router.push("/xiadan");
    },
    //删除
    onSubmit() {
      this.$dialog
        .confirm({
          title: "标题",
          message: "弹窗内容",
        })
        .then(() => {
          console.log(11);
          console.log(this.xuan);
          let arr = [];
          for (let v in this.xuan) {
            arr.push(axios.delete("/gwc/" + this.xuan[v]));
          }
          console.log(arr);
          axios.all(arr).then((a, b, d) => {
            console.log(a);
            console.log(b);
            console.log(d);
            this.goods = this.goods.filter((todo) => !todo.isChecked);
            if (this.goods.length == "") {
              this.isusers = true;
            }
          });
          // axios({
          //   url: "/gwc/",
          //   method: "DELETE",
          // }).then((res) => {
          // this.goods = this.goods.filter((todo) => !todo.isChecked);
          //   console.log(res);
          // });
          // if (this.goods.length == "") {
          //     this.isusers = true;
          //   }
          // console.log(this.goods.isChecked.id);
        })
        .catch(() => {
          // on cancel
        });
      // console.log(this.goods.xuan.id);
    },
    // 单个的选中
    backCheck() {
      this.allchecked = this.goods.every((good) => good.isChecked);

      this.totalMoney();
    },
    // 全部选中
    checkAll() {
      this.goods.forEach((good) => {
        good.isChecked = this.allchecked;
      });

      this.totalMoney();
    },
    // 删除
    del() {
      let goumai = document.querySelector(".goumai");
      let shanchu = document.querySelector(".shanchu");
      if (this.zhuangtai == "编辑") {
        this.zhuangtai = "完成";
        goumai.style.display = "none";
        shanchu.style.display = "block";
      } else if (this.zhuangtai == "完成") {
        this.zhuangtai = "编辑";
        goumai.style.display = "block";
        shanchu.style.display = "none";
      }
    },
    totalMoney() {
      let money = 0;
      this.checks = {};
      this.xuan = {};
      this.goods.forEach((good) => {
        if (good.isChecked) {
          this.checks[good.goodsId] = good.count;
          this.xuan[good.goodsId] = good.id;
        }
        if (good.isChecked) {
          money += good.goodsprice * good.count;
        }
      });

      this.totalMoney1 = money * 100;
    },
    jia(index) {
      // 思路：先让后端修改count，后端修改成功后，再修改前端的count。

      // 后端修改数据count
      axios({
        url: "/gwc/" + this.goods[index].id,
        method: "PATCH",
        data: {
          count: this.goods[index].count + 1,
        },
      }).then((res) => {
        // 前端数据的变化
        this.goods[index].count++;
      });
    },
    jian(index) {
      // 后端修改数据count
      axios({
        url: "/gwc/" + this.goods[index].id,
        method: "PATCH",
        data: {
          count: this.goods[index].count - 1,
        },
      }).then((res) => {
        // 前端数据的变化
        this.goods[index].count--;
      });
    },
  },
};
</script>

<style scoped>
.shanchu {
  display: none;
}
.numb {
  line-height: 0.28rem;
  margin: 0 0.1rem;
  width: 0.37rem;
  display: inline-block;
  text-align: center;
  border: 0.01rem solid #f2f3f2;
}
.jian {
  width: 0.23rem;
  height: 0.23rem;
}
.add {
  width: 0.23rem;
  height: 0.23rem;
}
.goods_price {
  color: #f60;
  font-weight: 700;
  font-size: 14px;
}
.price_ {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.goodcolor {
  height: 0.3rem;
  width: 100%;
  line-height: 0.3rem;
  background: #f8f8f8;
  color: #999;
  font-size: 12px;
  margin: 0.1rem 0;
}
/* .van-submit-bar__bar {
  margin-top: -1.2rem;
} */
.goodname_ {
  width: 2.5rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.15rem;
  word-break: break-all;
}

.imggoods_ {
  width: 1rem;
  height: 1rem;
}
.check {
  width: 0.2rem;
  height: 0.2rem;
}
.top {
  width: 100%;
  height: 0.5rem;
  box-sizing: border-box;
  padding: 0 0.1rem;
  font-size: 0.18rem;
  display: flex;
  align-items: center;
  background-color: white;
  position: relative;
  background-color: #efcd7e;
}
.top .van-icon {
  font-size: 0.23rem;
}
.top p {
  margin: auto;
  margin-left: 40%;
}
.topgwc {
  left: 0;
  margin-left: 0.1rem;
  margin-right: 2rem;
}
.bianji {
  width: 0.59rem;
  height: 0.27rem;
  background-color: white;
  border: 1px solid rgb(146, 146, 146);
  border-radius: 0.05rem;
  margin: 0 0.17rem;
}
.goods_ {
  width: 100%;
}
.goods_1 {
  width: 100%;
  height: 1.35rem;
  padding: 0.1rem 0.1rem;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 0.01rem solid #ccc;
  border-bottom: 0.02rem solid #ccc;
}

/* 未登录 */
.weidenglu img {
  width: 1.6rem;
  height: 1.5rem;
  margin-top: 10%;
  margin-left: 32%;
}
.weidenglu ul {
  height: 0.41rem;
  width: 3.8rem;
  display: flex;
  justify-content: space-between;
  margin: auto;
  font-size: 0.14rem;
  line-height: 0.41rem;
}
.weidenglu P {
  font-size: 0.23rem;
  color: #a5a4a4;
  text-align: center;
  margin: 0.2rem 0;
}
.weidenglu h3 {
  margin: auto;
  text-align: center;
  display: block;
  width: 1rem;
  height: 0.4rem;
  font-weight: normal;
  border: 0.01rem solid black;
  border-radius: 0.2rem;
  line-height: 0.4rem;
}
</style>